<template>
  <div class="searchBox">
    <el-form ref="filtrateForm" :model="filtrateForm" label-width="80px">
      <el-form-item label="科目">
        <el-radio-group v-model="filtrateForm.course" size="medium">
          <template v-for="(item, index) in course">
            <el-radio-button :label="index+1" :key="index">{{ item }}</el-radio-button>
          </template>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="试题状态">
        <el-radio-group v-model="filtrateForm.status" size="medium">
          <el-radio-button label="all">全部</el-radio-button>
          <el-radio-button label="edit">正在编辑</el-radio-button>
          <el-radio-button label="await">等待审核</el-radio-button>
          <el-radio-button label="success">发布成功</el-radio-button>
          <el-radio-button label="notGo">审核不通过</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="筛选条件">
        <el-select v-model="filtrateForm.chapter" placeholder="请选择章" @change="chapterSearch">
          <el-option
            v-for="item in chapterOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="filtrateForm.section" placeholder="请选择节" @change="sectionSearch">
          <el-option
            v-for="item in sectionOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="filtrateForm.checkpoint" placeholder="请选择考点" @change="checkPointSearch">
          <el-option
            v-for="item in checkPointOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="filtrateForm.difficulty" placeholder="请选择难度" @change="difficultySearch">
          <el-option
            v-for="item in difficultyOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input v-model="filtrateForm.questionName" placeholder="试题名称" style="width:160px;" />
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-card>
      <el-row>
        <el-col :span="15">
          <el-radio-group v-model="topicType" size="medium">
            <el-radio-button label="singleChoice">单选题</el-radio-button>
            <el-radio-button label="muchChoiceit">多选题</el-radio-button>
            <el-radio-button label="judge">判断题</el-radio-button>
            <el-radio-button label="shortAnswer">简答题</el-radio-button>
            <el-radio-button label="indefinite">不定项</el-radio-button>
            <el-radio-button label="cloze">填空题</el-radio-button>
            <el-radio-button label="Material">材料题</el-radio-button>
          </el-radio-group>
        </el-col>
        <el-col :span="6" style="float:right;text-align:right;">
          <el-button icon="el-icon-download" type="primary" @click="importData">导入试题</el-button>
          <el-button icon="el-icon-plus" type="primary" @click="addQuestions">添加试题</el-button>
        </el-col>
      </el-row>
      <div style="margin-top:20px;">
        <el-checkbox v-model="checkAll" @change="handleCheckAllChange">批量删除</el-checkbox>
        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteAll">删除</el-button>
      </div>
      <div class="taskListBox">
        <ul>
          <li v-for="(item1, index1) in taskListBox" :key="index1" style="margin-top:20px;">
            <el-checkbox v-model="item1.checkModel" @change="handleCheckItemChange" />
            <div
              class="status"
              :class="item1.status=='等待审核'?'active1': item1.status == '发布成功'?'active2':item1.status == '审核不通过'?'active3':'active4'"
            >
              {{ item1.status }}
              <div :v-if="item1.issueTime" style="margin-top:5px;color:#999;">{{ item1.issueTime }}</div>
            </div>
            <span class="title">{{ item1.title }}</span>
            <div class="operator">
              <div class="operator-list">
                编辑者
                <span>{{ item1.compiler }}</span>
              </div>
              <div class="operator-list">
                审核者
                <span>{{ item1.auditor }}</span>
              </div>
            </div>
            <div class="handle">
              <div>
                <el-button type="danger" class="littleBtn" @click="deleteList">删除</el-button>
                <el-button
                  type="primary"
                  class="littleBtn lastBtn"
                  @click="editList(item1.id,item1.type)"
                >编辑</el-button>
              </div>
              <el-button type="success" @click="auditQuestion(item1.id,item1.type)">审核</el-button>
            </div>
          </li>
        </ul>
      </div>
    </el-card>
    <!-- 导入数据弹框 -->
    <el-dialog :visible.sync="importDataDialog" title="导入试题" width="1000px">
      <el-row>
        <el-col :offset="22" :span="2">
          <el-button type="primary" size="mini" @click="innerVisible = true">导入记录</el-button>
        </el-col>
      </el-row>
      <div class="questionBank">
        <span>导入题库：</span>
        <el-select v-model="questionBank" placeholder="请选择题库">
          <el-option
            v-for="item in questionBankOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="subject" placeholder="请选择科目">
          <el-option
            v-for="item in subjectOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="questionBank">
        <span class="align">规则说明：</span>
        <div class="hintBox">
          <div>
            1.导入的文件必须是
            <span class="hint">excel</span>文件。
          </div>
          <div>
            2.请下载示例模板在模板内填充数据，填充数据时，
            <span class="hint">请严格按照模板内规则进行填充！</span>
          </div>
          <div>
            3.为了避免出现重复导入单个文件的情况，
            <span class="hint">导入文件与历史文件不允许重复。</span>
          </div>
          <div>
            4.单次最多导入条。
            <span class="hint">1000</span>数据。
          </div>
        </div>
      </div>
      <div class="questionBank">
        <span>下载模板：</span>
        <span style="color:#07bbee;">
          <a href="#">导入试题模板</a>
        </span>
      </div>
      <div class="questionBank">
        <span>导入文件 ：</span>
        <div style="display:inline-block;">
          <div class="disBtn">
            <el-upload
              :on-change="handleChange"
              :file-list="fileList"
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
            >
              <el-button size="small" type="info">选择文件</el-button>
            </el-upload>
            <el-input v-model="fileListName" size="small" style="width:200px;margin:0 20px;" />
            <el-button type="primary" size="small">校验数据</el-button>
          </div>
        </div>
      </div>
      <el-dialog width="900px" title="导入记录" :visible.sync="innerVisible" append-to-body>
        <el-table
          id="out-table"
          :data="recordTableData"
          border
          style="width: 100%;margin-top:20px;"
        >
          <el-table-column prop="name" label="文件名称" align="center" />
          <el-table-column prop="question" label="导入题库" align="center" />
          <el-table-column prop="subject" label="导入科目" align="center" />
          <el-table-column prop="toLeadTime" label="导入时间" align="center" />
          <el-table-column prop="questionNum" label="试题数量" align="center" />
          <el-table-column prop="operator" label="操作人" align="center" />
          <el-table-column label="操作" align="center" >
            <template slot-scope="scope">
              <div>
                <el-button>操作</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>

      <span slot="footer" class="dialog-footer">
        <el-button @click="importDataDialog = false">取 消</el-button>
        <el-button type="primary" @click="importDataDialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      course: [],
      questionBank: '',
      subject: '',
      fileListName: '',
      fileList: [],
      recordTableData: [],
      filtrateForm: {
        course: 1,
        status: 'all',
        chapter: '',
        section: '',
        checkpoint: '',
        difficulty: '',
        questionName: ''
      },
      topicType: 'singleChoice',
      taskListBox: [
        { id: 1, type: 'singleChoice', status: '正在编辑', title: '读万卷书', compiler: '张三', auditor: '李四', checkModel: false },
        { id: 2, type: 'muchChoiceit', status: '等待审核', title: '行万里路', compiler: '刘华', auditor: '王田', checkModel: false },
        { id: 3, type: 'judge', status: '发布成功', title: '仰望天空', compiler: '赵娜', auditor: '赵月', checkModel: false, issueTime: '2019-06-03' },
        { id: 3, type: 'shortAnswer', status: '审核不通过', title: '脚踏实地', compiler: '赵娜', auditor: '赵月', checkModel: false, issueTime: '' }
      ],
      checkAll: false, // 是否全选
      importDataDialog: false,
      innerVisible: false,
      chapterOptions: [
        {
          label: '第一章',
          value: 'firstChapter'
        }
      ],
      sectionOptions: [
        {
          label: '第一节',
          value: 'firstSection'
        }
      ],
      checkPointOptions: [
        {
          label: '语文基础',
          value: 'basic'
        }
      ],
      difficultyOptions: [
        {
          label: '简单',
          value: 'easy'
        },
        {
          label: '一般',
          value: 'ordinary'
        },
        {
          label: '困难',
          value: 'difficulty'
        }
      ],
      questionBankOptions: [
        {
          label: '第一题库',
          value: 'firstQuestionBank'
        }
      ],
      subjectOptions: [
        {
          label: '第一科目',
          value: 'firstSubject'
        }
      ]
    }
  },
  created() {
    this.getRouterData()
  },
  methods: {
    getRouterData() {
      this.course = this.$route.query.course
    },
    chapterSearch() { },
    sectionSearch() { },
    checkPointSearch() { },
    difficultySearch() { },
    handleCheckAllChange(val) {
      this.taskListBox.map((item, i) => {
        item.checkModel = val
      })
    },
    handleCheckItemChange(val) {
      for (let i = 0; i < this.taskListBox.length; i++) {
        if (this.taskListBox[i].checkModel !== val) {
          this.checkAll = false
          return
        }
      }
      this.checkAll = val
    },
    deleteAll() {
      if (this.checkAll) {
        this.$confirm('确认要删除全部吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.taskListBox = []
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        })
      }
    },
    deleteList(index) {
      this.$confirm('确认要删除吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.taskListBox.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      })
    },
    importData() {
      this.importDataDialog = true
    },
    // 添加题库
    addQuestions() {
      switch (this.topicType) {
        case 'singleChoice':
          this.$router.push({ name: 'Singlechoice', query: { click: 'addQuestion' } })
          break
        case 'muchChoiceit':
          this.$router.push({ name: 'Muchchoiceit', query: { click: 'addQuestion' } })
          break
        case 'judge':
          this.$router.push({ name: 'Judge', query: { click: 'addQuestion' } })
          break
        case 'shortAnswer':
          this.$router.push({ name: 'Shortanswer', query: { click: 'addQuestion' } })
          break
        case 'indefinite':
          // 不定项跳多选页面
          this.$router.push({ name: 'Muchchoiceit', query: { click: 'addQuestion' } })
          break
        case 'cloze':
          this.$router.push({ name: 'Cloze', query: { click: 'addQuestion' } })
          break
        default:
          this.$router.push({ name: 'Material', query: { click: 'addQuestion' } })
          break
      }
    },
    // 编辑
    editList(id, type) {
      switch (type) {
        case 'singleChoice':
          this.$router.push({ name: 'Singlechoice', query: { click: 'addQuestion' } })
          break
        case 'muchChoiceit':
          this.$router.push({ name: 'Muchchoiceit', query: { click: 'addQuestion' } })
          break
        case 'judge':
          this.$router.push({ name: 'Judge', query: { click: 'addQuestion' } })
          break
        case 'shortAnswer':
          this.$router.push({ name: 'Shortanswer', query: { click: 'addQuestion' } })
          break
        case 'indefinite':
          // 不定项跳多选页面
          this.$router.push({ name: 'Muchchoiceit', query: { click: 'addQuestion' } })
          break
        case 'cloze':
          this.$router.push({ name: 'Cloze', query: { click: 'addQuestion' } })
          break
        default:
          this.$router.push({ name: 'Material', query: { click: 'addQuestion' } })
          break
      }
    },
    // 审核
    auditQuestion(id, type) {
      switch (type) {
        case 'singleChoice':
          this.$router.push({ name: 'Singlechoice', query: { click: 'audit' } })
          break
        case 'muchChoiceit':
          this.$router.push({ name: 'Muchchoiceit', query: { click: 'audit' } })
          break
        case 'judge':
          this.$router.push({ name: 'Judge', query: { click: 'audit' } })
          break
        case 'shortAnswer':
          this.$router.push({ name: 'Shortanswer', query: { click: 'audit' } })
          break
        case 'indefinite':
          // 不定项跳多选页面
          this.$router.push({ name: 'Muchchoiceit', query: { click: 'audit' } })
          break
        case 'cloze':
          this.$router.push({ name: 'Cloze', query: { click: 'audit' } })
          break
        default:
          this.$router.push({ name: 'Material', query: { click: 'audit' } })
          break
      }
    },
    // 上传文件事件
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-1)
      this.fileListName = fileList[0].name
      console.log(fileList)
    }
  }
}
</script>
<style lang="scss" scoped>
.searchBox {
  .taskListBox {
    ul {
      padding: 0;
      margin: 0;
      li {
        height: 100px;
        background-color: #f8f6f6;
        display: flex;
        align-items: center;
        padding: 10px 20px;
        border-radius: 10px;
        box-shadow: 0 0 5px #a7a7a7;
        .status {
          width: 150px;
          text-align: center;
          flex-shrink: 0;
        }
        .status.active1 {
          color: #00ccff;
        }
        .status.active2 {
          color: #07be07;
        }
        .status.active3 {
          color: #ff0000;
        }
        .status.active4 {
          color: #666666;
        }
        .title {
          flex-grow: 1;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        .operator {
          color: #333;
          font-size: 12px;
          flex-shrink: 0;
          .operator-list {
            margin: 10px;
          }
        }
        .handle {
          flex-shrink: 0;
          display: flex;
          margin-left: 50px;
          // width: 200px;
          .littleBtn {
            display: block;
            margin: 0;
            margin-right: 10px;
          }
          .lastBtn {
            margin-top: 5px;
          }
        }
      }
    }
  }
  .questionBank {
    margin: 10px 0;
    .hintBox {
      display: inline-block;
      font-size: 12px;
      color: #666;
      line-height: 25px;
      .hint {
        color: #cc0000;
      }
    }
    .align {
      vertical-align: top;
      margin-top: 3px;
      display: inline-block;
    }
    .disBtn {
      display: flex;
      /deep/.el-upload-list {
        display: none;
      }
    }
  }
}
</style>
